import { RuleObject } from "ant-design-vue/es/form/interface";
import styles from "@user/popular/index.module.less";
import { modalFormState, popularLevelOptions } from "../store";
export default defineComponent({
  setup(props, { attrs }: any) {
    const help = ref<any>(
      <>
        <div class="fs12">{$t("placeholder140")}</div>
      </>
    );
    return () => {
      return (
        <>
          <div class={styles.modal_container}>
            <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <div class={[styles.tips_card, "mb16"]}>
                  <div class={styles.icon}>
                    {renderIcon(
                      "icon-jinggao-" + " " + styles["icon-jinggao-"]
                    )}
                  </div>
                  <div class={styles.txt}>{$t("placeholder137")}</div>
                </div>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <a-form-item
                  label={$t("table124")}
                  name="level"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 18 }}
                  help={help.value}
                  rules={[
                    {
                      required: true,
                      trigger: ["change", "blur"],
                      validator: (rule: RuleObject, value: string) => {
                        if (isEmptyType(value)) {
                          help.value = (
                            <>
                              <div class="fs12">{$t("placeholder47")}</div>
                            </>
                          );

                          return Promise.reject();
                        }

                        help.value = (
                          <>
                            <div class="fs12">{$t("placeholder140")}</div>
                          </>
                        );
                        return Promise.resolve();
                      },
                    },
                  ]}
                >
                  <s-select
                    vModel:newValue={modalFormState.level}
                    placeholder={$t("placeholder18")}
                    options={popularLevelOptions}
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </>
      );
    };
  },
});
